<template>
	<view>
		<!-- 搜索栏 -->
		<div class="search-bar">
			<uni-search-bar @confirm="search"></uni-search-bar>
		</div>
		<view style="padding: 20px 15px;">
			<view class="flex-container">
				<text class="title">历史记录</text>
				<image v-if="lists.length >0" @click="del" src="/static/seek/cc.png" class="image"></image>
			</view>
			<view class="text-container">
				<text v-for="(iten,index) in lists" :key="index" @click="search(iten.history,1)"
					class="view_ss">{{iten.history}}</text>
			</view>
		</view>
		<!-- 弹出层 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog cancelText="取消" confirmText="确定" title=" " content="您确认删除?" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		gonavigateTo,
		goswitchTab
	} from '@/request/wx.js'
	import {
		showseeklist,
		addseek,
		delseek
	} from '@/request/api.js'
	import {
		onLoad,
		onShow
	}
	from '@dcloudio/uni-app';
	let tid;
	let tv = 0;
	//获取用户id
	const uid = 1;//uni.getStorageSync('token');
	const alertDialog = ref(null);
	onLoad(async (e) => {
		console.log("seek.tid:" + e.tid)
		tid = e.tid
		tv = e.tv
		showseek()
	});
	//回车跳转前往页面
	function search(event, index) {
		// 去除空白字符后检查是否为空
		if (typeof event.value === 'string' && event.value.trim() === '' || typeof event === 'string' && event.trim() ===
			'') {
			console.log('输入为空');
		} else {
			if (index == 1) {
				uni.setStorageSync('result', event);
			} else {
				console.log('输入不为空:', event.value);
				const result = event.value;
				//保存搜索记录
				addseeks(result)
				uni.setStorageSync('result', result);
			}
			wx.navigateBack({ //delta: 1 返回上一页
				delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
			});
			// switch (tid) {
			// 	case "0":
			// 		console.log(1)
			// 		goswitchTab(`/pages/user/jzyy/jzyy`);
			// 		break;
			// 	case "1":
			// 		if (tv == 1) {
			// 			gonavigateTo(`/pages/user/index/fwjs`);
			// 		} else {
			// 			gonavigateTo(`/pages/user/index/zxdt`);
			// 		}
			// 		break;
			// 	case "2":
			// 		console.log(3)
			// 		gonavigateTo(`/pages/user/appointment/appointment`);
			// 		break;
			// }
		}
	}
	//显示搜索记录
	async function showseek() {
		// console.log("tid", tid, "token", uid)
		const data = {
			'uid': uid,
			"tid": tid
		}
		const response = await showseeklist(data)
		lists.value = response.data.data.map(item => {
			return {
				history: item.data,
				id: item.id
			};
		});
		console.log("response", response)

	}
	//保存搜索记录
	async function addseeks(dataa) {
		console.log("dataa", dataa)
		const data = {
			'uid': uid,
			'tid': tid,
			'data': dataa
		}
		const response = await addseek(data)
		console.log("response", response)
	}
	//删除所有的搜索记录
	async function del() {
		alertDialog.value.open();
	}
	//确定
	async function dialogConfirm() {
		console.log('点击确认');
		const data = {
			'uid': uid,
			'tid': tid
		}
		const response = await delseek(data)
		showseek()
	};
	//取消
	const dialogClose = () => {
		console.log(`点击取消`);
	};
	const lists = ref([])
</script>

<style>
	.search-bar {
		padding-bottom: 5px;
		border-bottom: 1px solid #e0e0e0;
	}

	.text-container {
		display: flex;
		flex-wrap: wrap;
		/* 允许容器内的子元素换行 */
		padding: 10px 0px;
		margin-top: 15px;
	}

	.view_ss {
		font-size: 14px;
		margin-right: 15px;
		background-color: gainsboro;
		padding: 4px 20px;
		border-radius: 19px;
		white-space: nowrap;
		margin-bottom: 10px;
		color: #8b6060;
	}

	.title {
		font-size: 20px;
		color: #333;
		font-weight: bold;
	}

	.image {
		width: 20px;
		height: 20px;
		float: right;
		margin-top: 5px;
	}

	.flex-container {
		height: 28px;
	}
</style>